<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  TrainingDetail,
  TrainingPayRecord,
  TrainingCoinRecord,
} from "@/http/api";
export default {
  components: { outMain },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,
      stepArr: [
        { name: "基本信息", id: 1 },
        { name: "充值记录", id: 2 },
        { name: "鲸币记录", id: 3 },
      ],
      stepId: 1,
      formData: {},
      queryData: {
        training_id: this.$route.query.id,
        page: 1,
        per_page: 10,
      },
      tableData: [],
      total: 0,
    };
  },
  props: {},
  setup() {},
  methods: {
    backFn() {
      this.$router.back();
    },
    navFn(item) {
      this.stepId = item.id;
      if (item.id !== 1) {
        this.queryData.page = 1;
        this.serchFn();
      }
    },
    serchFn() {
      if (this.stepId === 2) {
        this.getPayFn();
      } else if (this.stepId === 3) {
        this.getCoinFn();
      }
    },
    async getCoinFn() {
      const { data } = await TrainingCoinRecord(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    async getPayFn() {
      const { data } = await TrainingPayRecord(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    getData() {
      TrainingDetail({ training_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
        }
      });
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>办证培训账号详情</div>
          <btn value="返回上一级" @ok="backFn"></btn>
        </div>
        <div class="formMain">
          <div class="stepNav">
            <div
              :class="stepId === item.id ? 'stepItemActive' : 'stepItem'"
              @click="navFn(item)"
              :key="index"
              v-for="(item, index) in stepArr"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 1">
            <div class="formDes">
              <div class="desTitle">基本信息</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">负责人</div>
                  <div class="desText">{{ formData.training_person }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">手机号</div>
                  <div class="desText">{{ formData.training_mobile }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">账号状态</div>
                  <div class="desText">
                    <el-tag v-if="formData.training_status == 1">正常</el-tag>
                    <el-tag v-if="formData.training_status == 2" type="danger"
                      >禁用</el-tag
                    >
                    <el-tag v-if="formData.training_status == 3" type="info"
                      >已到期</el-tag
                    >
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">账户鲸币</div>
                  <div class="desText">{{ formData.jlh_coin }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">充值金额</div>
                  <div class="desText">{{ formData.cz_money }}（元）</div>
                </div>
                <div class="desItem">
                  <div class="desName">开户金额</div>
                  <div class="desText">{{ formData.account_money }}（元）</div>
                </div>
                <div class="desItem">
                  <div class="desName">创建时间</div>
                  <div class="desText">{{ formData.create_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">到期时间</div>
                  <div class="desText">{{ formData.expiration_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">最近登录时间</div>
                  <div class="desText">{{ formData.lastlogin_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">备注信息</div>
                  <div class="desText">
                    {{
                      formData.training_remark
                        ? formData.training_remark
                        : "- -"
                    }}
                  </div>
                </div>
                <div class="desItem" v-if="formData.training_status == 2">
                  <div class="desName">禁用原因</div>
                  <div class="desText">{{ formData.jy_reason }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 2">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">充值记录（{{ total }}）</div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="order_number"
                  show-overflow-tooltip
                  width="220"
                  label="订单号"
                />
                <el-table-column
                  prop="pay_money"
                  width="150"
                  show-overflow-tooltip
                  label="支付金额"
                >
                  <template #default="{ row }"
                    >{{ row.pay_money }}（元）</template
                  >
                </el-table-column>
                <el-table-column
                  prop="msg"
                  show-overflow-tooltip
                  label="充值内容"
                />
                <el-table-column
                  width="200"
                  prop="create_time"
                  show-overflow-tooltip
                  label="创建时间"
                />
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 3">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">鲸币记录（{{ total }}）</div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="order_number"
                  width="220"
                  show-overflow-tooltip
                  label="单号"
                />
                <el-table-column
                  prop="coin"
                  width="100"
                  show-overflow-tooltip
                  label="充值/消费"
                >
                  <template #default="{ row }">
                    <span class="greenText" v-if="row.type == 1"
                      >+{{ row.coin }}</span
                    >
                    <span class="redText" v-if="row.type == 2"
                      >-{{ row.coin }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="change_coin"
                  width="100"
                  show-overflow-tooltip
                  label="剩余鲸币"
                />
                <el-table-column width="100" show-overflow-tooltip label="类型">
                  <template #default="{ row }">
                    <div class="tagGroup">
                      <el-tag v-if="row.type == 1">充值</el-tag>
                      <el-tag v-if="row.type == 2" type="danger">消费</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="msg"
                  show-overflow-tooltip
                  label="说明"
                />
                <el-table-column
                  width="200"
                  prop="create_time"
                  show-overflow-tooltip
                  label="创建时间"
                />
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
